import React from 'react'
import { Menu } from 'antd';
// 引入路由类型
import { RouterArr } from '../../type';
import { useLocation, useNavigate } from 'react-router-dom';
import { RouterList } from '../../router';

// 渲染路由页面
// routers: 是一个数组，包含所有路由配置对象，每个对象可能包含如路径、元数据等信息。
// role: 是一个字符串，表示用户的角色，用于权限筛选
const GetMenu = (routers: RouterArr[], role: string) => {
    return routers.filter((item) => {
        // 将路由表中隐藏的路由筛选掉
        if (item.meta.hide) {
            return false
        }
        return true
    }).filter((item) => {
        // 筛选权限 如果role属性不存在表示所有人都能看所以返回为真
        if (!item.meta.roles) {
            return true
        } else {
            // 如果roles存在则判断当前路由的权限和登陆权限是否一致
            // 如果路由没有 roles 属性，则所有用户都可以访问该路由；
            // 如果有 roles 属性，则检查当前用户的角色是否在允许的角色列表中。
            return item.meta.roles.includes(role)
        }
    }).sort((a, b) => {
        // 菜单位置排序
        // 根据 rank 属性对路由进行排序，默认 rank 为 1
        const rankA = a.meta.rank === undefined ? 1 : a.meta.rank;
        const rankB = b.meta.rank === undefined ? 1 : b.meta.rank;
        return rankA - rankB
        // 将每个路由映射为包含 key、icon 和 label 的对象，供菜单组件使用。
    }).map((item) => {
        return {
            key: item.path,
            icon: item.meta.icon,
            label: item.meta.label
        }
    })
}
const Index: React.FC = () => {
    // 获取并解构出当前页面的路径
    const { pathname } = useLocation()
    // //调用生成菜单的方法
    const items = GetMenu(RouterList, 'admin')
    const navigate = useNavigate()
    return (
        <div>
            <Menu
                defaultSelectedKeys={[pathname]}
                defaultOpenKeys={[pathname]}
                mode="inline"
                items={items}
                onSelect={({ key }) => navigate(key)}
            />
        </div>
    )
}

export default Index